<template>
    <div class="n1">
        <div style="margin-bottom: 10%">
            <el-form :model="data" :rules="mRules" ref="form" label-width="140px">

                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <span>企业信息</span>
                    </div>
                    <div>
                        <el-form-item label="企业名称:">
                            <span>{{data.name | nullFilter}}</span>
                        </el-form-item>
                        <el-form-item label="企业规模:">
                            <span>{{data.companyScale | nullFilter}}</span>
                        </el-form-item>
                        <el-form-item label="所属行业:">
                            <span v-if="!data.industryId || !industryId">{{nullText}}</span>
                            <span v-else-if="!pIndustryType">{{industryType.name}}</span>
                            <span v-else>{{industryType.name}}/{{pIndustryType.name}}</span>
                        </el-form-item>
                        <el-form-item label="企业类型:">
                            <span v-if="!data.unitType || data.unitType.length==0">{{nullText}}</span>
                            <el-tag v-else type='info' class="rit5" v-for="tag in split(data.unitType)">
                                {{tag}}
                            </el-tag>
                        </el-form-item>
                        <el-form-item label="企业简介:">
                            <span v-html="data.companyContent"> {{data.companyContent| nullFilter}}</span>
                        </el-form-item>
                        <el-form-item label="企业地址:">
                            <span>{{data.address | nullFilter}}</span>
                        </el-form-item>
                        <el-form-item label="固定电话:">
                            <span>{{data.telephone | nullFilter}}</span>
                        </el-form-item>
                        <el-form-item label="企业简介图片:">
                            <span v-if="!data.companyImages">{{nullText}}</span>
                            <ImageList v-else :type="'object'" :key="'url'" :list="data.companyImages"/>
                        </el-form-item>
                    </div>
                </el-card>

                <el-card shadow="hover" style="margin-bottom: 5px">
                    <div slot="header" class="clearfix">
                        <span>联系人信息</span>
                    </div>
                    <el-row>
                        <el-col :span="10">
                            <el-col>
                                <el-form-item label="联系人1:">
                                    <span>{{data.contactPeople1 | nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item label="联系人1职务:">
                                    <span>{{data.contactPeople1Job | nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item label="联系人1手机:">
                                    <span>{{data.phone | nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                        </el-col>
                        <el-col :span="10">
                            <el-col>
                                <el-form-item label="联系人2:">
                                    <span>{{data.contactPeople2 | nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item label="联系人2职务:">
                                    <span>{{data.contactPeople2Job | nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item label="联系人2手机:">
                                    <span>{{data.phone2 | nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                        </el-col>
                    </el-row>

                </el-card>

                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <span>营业执照</span>
                    </div>
                    <div>
                        <el-form-item>
                            <span v-if="!businessLicenseImgUpload.fileList || businessLicenseImgUpload.fileList.length==0">{{nullText}}</span>
                            <ImageList v-else :type="'object'" :key="'url'" :list="businessLicenseImgUpload.fileList"/>
                        </el-form-item>
                    </div>
                </el-card>
            </el-form>
        </div>
        <div class="toolbar-bottom-right">
            <el-button class="button" @click="close()" size="medium">返回企业列表</el-button>
            <!--            <el-button type="primary" class="button" size="medium" @click="insert()">提交</el-button>-->
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Emit, Prop} from 'vue-property-decorator'
    import {API} from "@/core/api/API";
    import {ElForm} from "element-ui/types/form";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import {errorMsg, successMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import {rule} from "@/core/utils/rule";
    import Kit from "@/core/mixin/Kit";
    import {getStorage} from "@/core/utils/storage";
    import UploadImage from "@/components/Updalod/UploadImage.vue";
    import ImageList from "@/components/Image/ImageList.vue";
    import {copy, tree} from "@/core/utils/Utils";

    @Component({
        name: 'CompanyGInfo',
        components: {
            UploadImage,
            ImageList
        },
    })
    export default class CompanyGInfo extends mixins(BaseVue, Kit) {
        @Prop({default: {}}) mData!: any;
        @Prop({default: {type: 'insert', title: '添加'}}) option!: any;
        nullText = "暂无数据";

        get userInfo() {
            return {id: this.mData.userId, account: this.mData.account}
        }

        contentImgUpload = {
            fileList: [],
            url: "/company/companyInfo/uploadFile",
            listType: "picture-card",
            maxSize: "10",
            uploadBack: this.contentImgUploadCallBack,
        };

        businessLicenseImgUpload = {
            fileList: [],
            url: "/company/companyInfo/uploadFile",
            listType: "picture-card",
            maxSize: "10",
            uploadBack: this.businessLicenseUploadCallBack,
        };

        // 表单数据
        data: any = {
            unitType: []
        };
        // 企业类型字典
        unitTypeList: any = [];
        // 行业字典
        industryList: any = [];
        // 企业规模字典
        companyScaleList: any = [];
        //关闭时是否刷新分页
        backRefresh: boolean = false;
        mRules = {
            name: [rule.notNullBlur()],
            industryId: [rule.notNullBlur()],
            address: [rule.notNullBlur()],
        };

        //初始化
        async mounted() {
            this.viewData = copy(this.viewData);
            // 企业类型字典数据
            this.unitTypeList = getStorage("companyType");
            // 企业规模字典数据
            this.companyScaleList = getStorage("companyScale");
            await this.getIndustryTypeList();
            await this.getCompanyInfo();
            this.getIndustry();
        }

        // 获取行业类型数据
        getIndustryTypeList() {
            return $http.post(API.industryTypeList, {}).then((res: any) => {
                if (res.success) {
                    this.industryList = tree(res.data);
                } else {
                    errorMsg("行业类型数据获取失败");
                }
                return "";
            });
        }

        industryId = null;

        // 获取企业信息
        getCompanyInfo() {
            return $http.post(API.companyInfoByUserId, {id: this.userInfo.id}).then((res1: any) => {
                if (res1.success) {
                    this.data = res1.data;
                    if (this.data.companyImages) {
                        this.data.companyImages = JSON.parse(this.data.companyImages);
                        this.contentImgUpload.fileList = copy(this.data.companyImages);
                    }
                    if (this.data.businessLicense) {
                        this.data.businessLicense = JSON.parse(this.data.businessLicense);
                        this.businessLicenseImgUpload.fileList = copy(this.data.businessLicense);
                    }
                    if (this.data.industryId) {
                        this.industryId = this.data.industryId;
                        for (let i in this.industryList) {
                            for (let j in this.industryList[i].children) {
                                if (this.data.industryId == this.industryList[i].children[j].id) {
                                    this.data.industryId = [this.industryList[i].children[j].pid, this.data.industryId];
                                    break;
                                }
                            }
                        }
                    }
                    if (this.data.unitType) {
                        this.data.unitType = this.data.unitType.split(",");
                    } else {
                        this.data.unitType = [];
                    }
                } else {
                    errorMsg("数据丢失");
                }
                return "";
            })
        }


        //查询所属行业信息
        industryType: any = {};
        pIndustryType: any = {};

        getIndustry() {
            // id: this.data.industryId
            //console.log(this.industryId);
            if (this.industryId) {
                $http.post(API.industryTypeInfo, {id: this.industryId}).then((res: any) => {
                    if (res.success) {
                        this.industryType = res.data.type;
                        this.pIndustryType = res.data.pType;
                    }
                });

            }
        }


        // 保存数据
        insert() {
            (this.$refs.form as ElForm).validate().then(() => {
                let data = copy(this.data);
                data.unitType = data.unitType.join(",");
                if (typeof data.industryId == 'object') {
                    data.industryId = data.industryId[data.industryId.length - 1];
                }
                if (!data.id) {
                    data.userId = this.userInfo.id;
                    data.userAccount = this.userInfo.account;
                }
                if (data.companyImages && data.companyImages.length > 0) {
                    data.companyImages = JSON.stringify(data.companyImages);
                } else {
                    data.companyImages = "[]";
                }
                if (data.businessLicense && data.businessLicense.length > 0) {
                    data.businessLicense = JSON.stringify(data.businessLicense);
                } else {
                    data.businessLicense = "[]";
                }
                $http.post(API.companyInfoUpdate, data).then((res: any) => {
                    if (res.success) {
                        this.backRefresh = true;
                        successMsg("操作成功");
                    } else {
                        errorMsg("操作失败");
                    }
                });
            },).catch(() => {
                errorMsg("表单内容填写错误，请检查！");
            });
        }

        contentImgUploadCallBack(val: any) {
            this.data.companyImages = val.fileList;
        }

        businessLicenseUploadCallBack(val: any) {
            this.data.businessLicense = val.fileList;
        }

        //关闭事件
        @Emit("close")
        close() {
            return {refresh: this.backRefresh};
        }
    }


</script>

<style scoped lang="scss">

</style>
